<div class="bg-white pb-6 sm:pb-8 lg:pb-12">
  <header class="mb-8 border-b">
    <div class="mx-auto flex max-w-screen-2xl items-center justify-between px-4 md:px-8">
      <!-- logo - start -->
      <a
        href="/"
        class="text-black-800 inline-flex items-center gap-2.5 text-2xl font-bold md:text-3xl"
        aria-label="logo"
      >
        <svg
          width="95"
          height="94"
          viewBox="0 0 95 94"
          class="h-auto w-6 text-indigo-500"
          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M96 0V47L48 94H0V47L48 0H96Z" />
        </svg>

        Flowrift
      </a>
      <!-- logo - end -->

      <!-- nav - start -->
      <nav class="hidden gap-12 lg:flex 2xl:ml-16">
        <a href="#" class="text-lg font-semibold text-indigo-500">Home</a>
        <a
          href="#"
          class="
            text-lg
            font-semibold
            text-gray-600
            transition
            duration-100
            hover:text-indigo-500
            active:text-indigo-700
          "
          >Collections</a
        >
        <a
          href="#"
          class="
            text-lg
            font-semibold
            text-gray-600
            transition
            duration-100
            hover:text-indigo-500
            active:text-indigo-700
          "
          >Sale</a
        >
        <a
          href="#"
          class="
            text-lg
            font-semibold
            text-gray-600
            transition
            duration-100
            hover:text-indigo-500
            active:text-indigo-700
          "
          >About</a
        >
      </nav>
      <!-- nav - end -->

      <!-- buttons - start -->
      <div class="flex divide-x border-r sm:border-l">
        <a
          href="#"
          class="
            hidden
            h-12
            w-12
            flex-col
            items-center
            justify-center
            gap-1.5
            transition
            duration-100
            hover:bg-gray-100
            active:bg-gray-200
            sm:flex
            sm:h-20
            sm:w-20
            md:h-24
            md:w-24
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-800"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
            />
          </svg>

          <span class="hidden text-xs font-semibold text-gray-500 sm:block">Wishlist</span>
        </a>

        <a
          href="#"
          class="
            flex
            h-12
            w-12
            flex-col
            items-center
            justify-center
            gap-1.5
            transition
            duration-100
            hover:bg-gray-100
            active:bg-gray-200
            sm:h-20
            sm:w-20
            md:h-24
            md:w-24
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-800"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
            />
          </svg>

          <span class="hidden text-xs font-semibold text-gray-500 sm:block">Account</span>
        </a>

        <a
          href="#"
          class="
            flex
            h-12
            w-12
            flex-col
            items-center
            justify-center
            gap-1.5
            transition
            duration-100
            hover:bg-gray-100
            active:bg-gray-200
            sm:h-20
            sm:w-20
            md:h-24
            md:w-24
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-800"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
            />
          </svg>

          <span class="hidden text-xs font-semibold text-gray-500 sm:block">Cart</span>
        </a>

        <button
          type="button"
          class="
            flex
            h-12
            w-12
            flex-col
            items-center
            justify-center
            gap-1.5
            transition
            duration-100
            hover:bg-gray-100
            active:bg-gray-200
            sm:h-20
            sm:w-20
            md:h-24
            md:w-24
            lg:hidden
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-800"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
              clip-rule="evenodd"
            />
          </svg>

          <span class="hidden text-xs font-semibold text-gray-500 sm:block">Menu</span>
        </button>
      </div>
      <!-- buttons - end -->
    </div>
  </header>

  <section class="mx-auto max-w-screen-2xl px-4 md:px-8">
    <div class="mb-8 flex flex-wrap justify-between md:mb-16">
      <div
        class="mb-6 flex w-full flex-col justify-center sm:mb-12 lg:mb-0 lg:w-1/3 lg:pt-48 lg:pb-24"
      >
        <h1 class="text-black-800 mb-4 text-4xl font-bold sm:text-5xl md:mb-8 md:text-6xl">
          Find your<br />style online
        </h1>

        <p class="max-w-md leading-relaxed text-gray-500 xl:text-lg">
          This is a section of some simple filler text, also known as placeholder text. It shares
          characteristics of real text.
        </p>
      </div>

      <div class="mb-12 flex w-full md:mb-16 lg:w-2/3">
        <div
          class="
            relative
            top-12
            left-12
            z-10
            -ml-12
            overflow-hidden
            rounded-lg
            bg-gray-100
            shadow-lg
            md:top-16
            md:left-16
            lg:ml-0
          "
        >
          <img
            src="https://images.unsplash.com/photo-1542340916-951bb72c8f74?auto=format&q=75&fit=crop&w=550&h=550"
            loading="lazy"
            alt="Photo by Kaung Htet"
            class="h-full w-full object-cover object-center"
          />
        </div>

        <div class="overflow-hidden rounded-lg bg-gray-100 shadow-lg">
          <img
            src="https://images.unsplash.com/photo-1586295166487-b265f7e83a7f?auto=format&q=75&fit=crop&w=550&h=550"
            loading="lazy"
            alt="Photo by Manny Moreno"
            class="h-full w-full object-cover object-center"
          />
        </div>
      </div>
    </div>

    <div class="flex flex-col items-center justify-between gap-8 md:flex-row">
      <div class="flex h-12 w-64 divide-x overflow-hidden rounded-lg border">
        <a
          href="#"
          class="
            flex
            w-1/3
            items-center
            justify-center
            text-gray-500
            transition
            duration-100
            hover:bg-gray-100
            active:bg-gray-200
          "
          >Men</a
        >
        <a
          href="#"
          class="
            flex
            w-1/3
            items-center
            justify-center
            text-gray-500
            transition
            duration-100
            hover:bg-gray-100
            active:bg-gray-200
          "
          >Women</a
        >
        <a
          href="#"
          class="
            flex
            w-1/3
            items-center
            justify-center
            text-gray-500
            transition
            duration-100
            hover:bg-gray-100
            active:bg-gray-200
          "
          >Teens</a
        >
      </div>

      <!-- social - start -->
      <div class="flex items-center justify-center gap-4 lg:justify-start">
        <span class="text-sm font-semibold uppercase tracking-widest text-gray-400 sm:text-base"
          >Social</span
        >
        <span class="h-px w-12 bg-gray-200"></span>

        <div class="flex gap-4">
          <a
            href="#"
            target="_blank"
            class="text-gray-400 transition duration-100 hover:text-gray-500 active:text-gray-600"
          >
            <svg
              class="h-5 w-5"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="currentColor"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"
              />
            </svg>
          </a>

          <a
            href="#"
            target="_blank"
            class="text-gray-400 transition duration-100 hover:text-gray-500 active:text-gray-600"
          >
            <svg
              class="h-5 w-5"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="currentColor"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
              />
            </svg>
          </a>

          <a
            href="#"
            target="_blank"
            class="text-gray-400 transition duration-100 hover:text-gray-500 active:text-gray-600"
          >
            <svg
              class="h-5 w-5"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="currentColor"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M19.4168 2.4594C17.7648 0.873472 15.4785 0 12.9793 0C9.1616 0 6.81353 1.56493 5.51603 2.87767C3.91693 4.49547 3 6.64362 3 8.77138C3 11.4429 4.11746 13.4934 5.98876 14.2563C6.11439 14.3078 6.24081 14.3337 6.36475 14.3337C6.75953 14.3337 7.07233 14.0754 7.1807 13.661C7.24389 13.4233 7.39024 12.8369 7.45389 12.5823C7.59011 12.0795 7.48005 11.8377 7.18295 11.4876C6.64173 10.8472 6.38969 10.0899 6.38969 9.10438C6.38969 6.17698 8.56948 3.06578 12.6095 3.06578C15.8151 3.06578 17.8064 4.88772 17.8064 7.82052C17.8064 9.67124 17.4077 11.3852 16.6837 12.6468C16.1805 13.5235 15.2957 14.5685 13.9375 14.5685C13.3501 14.5685 12.8225 14.3272 12.4896 13.9066C12.1751 13.5089 12.0714 12.9953 12.1979 12.4599C12.3408 11.855 12.5357 11.2241 12.7243 10.6141C13.0682 9.5001 13.3933 8.44789 13.3933 7.60841C13.3933 6.17252 12.5106 5.20769 11.1969 5.20769C9.52737 5.20769 8.21941 6.90336 8.21941 9.06805C8.21941 10.1297 8.50155 10.9237 8.62929 11.2286C8.41896 12.1197 7.16899 17.4176 6.93189 18.4166C6.79478 18.9997 5.96893 23.6059 7.33586 23.9731C8.87168 24.3858 10.2445 19.8997 10.3842 19.3928C10.4975 18.9806 10.8937 17.4216 11.1365 16.4634C11.878 17.1775 13.0717 17.6603 14.2333 17.6603C16.4231 17.6603 18.3924 16.6749 19.7786 14.8858C21.1229 13.1505 21.8633 10.7318 21.8633 8.0757C21.8632 5.99923 20.9714 3.95209 19.4168 2.4594Z"
              />
            </svg>
          </a>
        </div>
      </div>
      <!-- social - end -->
    </div>
  </section>
</div>
